@import '/assets/base.scss';
.layout-wrapper {
  display: flex;
  height: 100vh;
  .layout-left,
  .layout-left-mobile {
    width: 30%;
    height: 100%;
    position: relative;
  }
  .layout-right,
  .layout-right-mobile {
    width: 70%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}

@media screen and (max-width: 647px) {
  .layout-wrapper {
    min-width: 100%;
    .layout-left {
      width: 100%;
      .tabs-wrapper {
        display: flex;
        justify-content: space-around;
        width: 100%;
        position: fixed;
        bottom: 0;
        border-top: 1px solid $border;
      }
      .home-page-list-wrapper {
        width: 100%;
        height: calc(100% - 46px);
        .header-wrapper {
          padding-left: 14px !important;
          .myInfo {
            display: inline-block;
            visibility: visible;
          }
        }
        .home-page-list-content {
          height: calc(100% - 46px);
        }
      }
    }
    .layout-left-mobile {
      display: none;
    }
    .layout-right {
      width: 100%;
      .back-icon {
        display: inline-block !important;
      }
    }
    .layout-right-mobile {
      display: none;
    }
  }
}

@media screen and (min-width: 647px) {
  .layout-wrapper {
    min-width: 100%;
    .layout-left,
    .layout-left-mobile {
      width: 40%;
      display: flex;
      flex-wrap: nowrap;
      .tabs-wrapper {
        padding: 26px 4px 0;
        height: 100%;
        border-right: 1px solid $border;
        .myInfo {
          display: inline-block;
          margin-bottom: 50px;
        }
        .tab {
          padding-bottom: 30px;
        }
      }
      .home-page-list-wrapper,
      .setting,
      .notify {
        border-right: 1px solid $border;
      }
      .home-page-list-wrapper {
        width: calc(100% - 53px);
        .home-page-list-content {
          height: calc(100% - 50px);
        }
      }
    }
    .layout-right,
    .layout-right-mobile {
      width: 60%;
    }
  }
}

@media screen and (min-width: 1025px) {
  .layout-wrapper {
    min-width: 100%;
    .layout-left,
    .layout-left-mobile {
      width: 30%;
    }
    .layout-right,
    .layout-right-mobile {
      width: 70%;
    }
  }
}

@media screen and (min-width: 1320px) {
  .layout-wrapper {
    min-width: 100%;
    .layout-left {
      width: 25%;
    }
    .layout-right {
      width: 75%;
    }
  }
}

@media screen and (min-width: 1440px) {
  .layout-wrapper {
    min-width: 100%;
    .layout-left {
      width: 20%;
    }
    .layout-right {
      width: 80%;
    }
  }
}
